<template>
  <el-card class="mb-6" shadow="never">

    <template #header>
      <div class="d-flex justify-space-between">
        <el-text :size="'large'"> {{ api.detailState.form.name }}</el-text>

        <CompanySetting :api="api"/>
      </div>
    </template>
    <div class="d-flex justify-space-around">
      <div
        v-for="item in api.detailState.form.associationCountList"
        class="pa-4 d-flex flex-column"
      >
        <el-text class="pb-2">{{ item.count }}</el-text>
        <el-text>{{ item.label }}</el-text>
      </div>
    </div>
  </el-card>

</template>

<script setup lang="ts">
import { CompanyApi } from "~/api/system/company/company.api";
import {Setting} from '@element-plus/icons-vue';
import CompanySetting from "~/views/system/company/CompanySetting.vue";

interface Props {
  api: CompanyApi;
}

const {api} = withDefaults(defineProps<Props>(), {});

</script>

<style scoped lang="scss">

</style>
